import React from 'react';
import {GForm} from 'geminis-react';
import {SchemaFieldComponents} from '../Form';

const CustomComponent = (props: any) => {
  return (
    <>
      <div>custom component</div>
      <div>{props.customValue}</div>
    </>
  );
};

SchemaFieldComponents['CustomComponent'] = CustomComponent;

export default () => {
  const schema = {
    data: {
      url: '/api/users',
      autoload: true,
    },
    layout: {
      submit: {},
    },
    fields: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          title: '用户名',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-component-props': {
            placeholder: '请输入用户名',
          },
        },
        age: {
          type: 'string',
          title: '年龄',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'NumberPicker',
          'x-component-props': {
            placeholder: '请输入年龄',
          },
          'x-reactions': {
            dependencies: [
              {
                property: 'value',
                type: 'string',
                source: 'name',
                name: 'name',
              },
            ],
            fulfill: {
              state: {
                display: "{{$deps.name !== 'gemini' ? 'visible' : 'none'}}",
              },
            },
          },
        },
        select: {
          type: 'string',
          title: '选项',
          'x-decorator': 'FormItem',
          'x-component': 'GSelect',
          'x-component-props': {
            url: '/api/users'
          },
        },
        custom: {
          type: 'string',
          title: '选项',
          'x-decorator': 'FormItem',
          'x-component': 'CustomComponent',
          'x-component-props': {customValue: '自定义数据'},
        },
        details: {
          type: 'array',
          title: '扩展属性',
          'x-decorator': 'FormItem',
          'x-component': 'ArrayTable',
          'x-component-props': {
            pagination: {
              pageSize: 10,
            },
          },
          items: {
            type: 'object',
            properties: {
              propKey: {
                type: 'void',
                'x-component': 'ArrayTable.Column',
                'x-component-props': {
                  title: '属性名',
                },
                properties: {
                  propKey: {
                    type: 'string',
                    'x-decorator': 'Editable',
                    'x-component': 'Input',
                  },
                },
              },
              propValue: {
                type: 'void',
                'x-component': 'ArrayTable.Column',
                'x-component-props': {
                  title: '属性值',
                  width: 120,
                },
                properties: {
                  propValue: {
                    type: 'string',
                    'x-decorator': 'Editable',
                    'x-component': 'Input',
                  },
                },
              },
              button: {
                type: 'void',
                'x-component': 'ArrayTable.Column',
                'x-component-props': {
                  title: '操作',
                  width: 80,
                  fixed: 'right',
                },
                properties: {
                  item: {
                    type: 'void',
                    'x-component': 'FormItem',
                    properties: {
                      sort: {
                        type: 'void',
                        'x-component': 'ArrayTable.SortHandle',
                      },
                      remove: {
                        type: 'void',
                        'x-component': 'ArrayTable.Remove',
                      },
                    },
                  },
                },
              },
            },
          },

          properties: {
            add: {
              type: 'void',
              'x-component': 'ArrayTable.Addition',
              title: '添加物品',
            },
          },
        },
      },
    },
  };

  return (
    <GForm
      schema={schema}
      onSubmitting={(value: any, schema: GFormSchema) => {
        console.log('Form submitting');
        console.log(schema);
        console.log(value);
      }}
      onSubmitted={(value: any, resp: any) => {
        console.log('Form submitted');
        console.log(value);
        console.log(resp);
      }}
      onLoading={(schema: GFormSchema) => {
        console.log('Form loading');
        console.log(schema);
      }}
      onLoaded={(value: any) => {
        console.log('Form loaded');
        console.log(value);
      }}
    />
  );
};
